<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/*
				box2被往下挤100个像素
				*/
				margin-bottom: 100px;
			}
			
			.box2 {
				width: 200px;
				height: 200px;
				background-color: #bfa;
				/*
				为下边的元素设置一个上外边距
				注意：
					- 相邻的两个垂直外边距，会取最大值，不是求和。
					所以这里是 200px 
				*/
			   margin-top: 200px;
			}
			
			/*
			像下面这样的父子元素，两个的垂直方向上的边框是相邻的。
			这时候子元素的margin-top会传递给父元素
			*/
			.box3 {
				width: 200px;
				height: 200px;
				background-color: yellow;
				
				/*
				解决方法一：
				下面这两个方法
				设置了边框，那么两个box就不相邻了。
				*/
				/* border-top: 1px red solid; */
				padding-top: 1px;
			}
			
			.box4 {
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		这一课真的要好好看。
		H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频3 52课
		-->
		<div class="box3">
			<div class="box4"></div>
		</div>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
